<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<title>用户管理</title>
<link href="../../web-frame/layui/css/layui.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/font-awesome.min.css" rel="stylesheet"/>
<!-- bootstrap-table 表格插件样式 -->
<link href="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.css?v=20201129" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/animate.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/style.css?v=20200903" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
<script src="../../web-frame/ruoyi/js/jquery.min.js"></script>
<script src="../../web-frame/ruoyi/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20201129"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/messages_zh.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- 遮罩层 -->
<script src="../../web-frame/ruoyi/libs/blockUI/jquery.blockUI.js"></script>
<script src="../../web-frame/ruoyi/libs/iCheck/icheck.min.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/layer.min.js"></script>
<script src="../../web-frame/layui/layui.js"></script>
<script src="../../web-frame/layui/layui.js"></script>
<script src="/web-frame/ruoyi/libs/layer/laytpl.js"></script>
<script src="/web-frame/ruoyi/libs/layer/form.js"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/common.js?v=4.6.0"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/ry-ui.js?v=4.6.0"></script>
<script src="/web-frame/element/js/axios.js"></script>
<script src="/web-frame/js/glob.js"></script>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            关键字查询：<input type="text" name="keyword"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<script>

    var url = decodeURI(window.location.href);
    var argsIndex = url .split("?obj=");
    //角色信息id
    var arg = argsIndex[1];

    var urlData={
        page:'/menu/menurolelist?roleId='+arg,
        save:'url',
        update:'url',
        get:'url',
        delete:'url'
    }

    $(function() {
        var options = {
            url: urlData.page,
            modalName: "菜单列表",
            columns: [{
                checkbox: true
            },
                {
                    title: '序号',
                    align: 'center',
                    halign: 'center',
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    field: 'name',
                    title: '菜单名称'
                },
                {
                    field: 'menu_url',
                    title: '菜单地址'
                },
                {
                    field: 'permission',
                    title: '菜单权限'
                },
                {
                    title: '是否授权',
                    align: 'center',
                    width: 100,
                    formatter: function (value, row, index) {
                        var code=row.code
                        var msg=''
                        if(code==0){
                            msg='未授权'
                        }else {
                            msg='已授权'
                        }
                        return msg;
                    }
                },
                {
                    title: '操作',
                    width: '20',
                    widthUnit: '%',
                    align: "left",
                    formatter: function (value, row, index) {
                        var actions = [];
                        var code=row.code
                        if(code==0){
                            actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="editData(\'' + row.menu_id + '\')">授权</a> ');
                        }else {
                            actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeData(\'' + row.id + '\')">解除授权</a>');
                        }
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });


    //修改数据
    function editData(obj) {
        layer.confirm('确认授权', {
            btn: ['确认', '取消'] //可以无限个按钮
        }, function(index, layero){
            shouquan(arg,obj)
            layer.close(index);
        });
    }

    function shouquan(roleId,menuId) {
        var data={};
        data.menuId=menuId;
        data.roleId=arg;
        var data=urldata('post','/role/rolemenu',JSON.stringify(data))
        if(data.code==0) {
            layer.msg("授权成功");
            $('#bootstrap-table').bootstrapTable(('refresh'));
        }else {
            layer.msg(data.msg);
        }
    }

    function removeData(obj) {
        layer.confirm('确认解除授权', {
            btn: ['确认', '取消']
        }, function(index, layero){
            var data=urldata('post','/role/delete/'+obj,undefined);
            if(data.code===0){
                $('#bootstrap-table').bootstrapTable(('refresh'));
                layer.msg("解除授权成功")
            }else {
                layer.msg(data.msg);
            }
            layer.close(index);
        })
    }




    var DataDeal = {
        //将从form中通过$('#refer').serialize()获取的值转成json
        formToJson: function (data) {
            data=data.replace(/&/g,"\",\"");
            data=data.replace(/=/g,"\":\"");
            data="{\""+data+"\"}";
            return data;
        }
    };

</script>
</body>
</html>